<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
        <Nav></Nav>
      </el-header>
      <Swipers :imgData='imgData'></Swipers>
      <el-container>
        <el-aside width="200px">
          <div class="aside">
            <p>作品集</p>
            <ul>
              <li>
                <router-link to='/img1440'>1440 * 900</router-link>
              </li>
              <li>
                
                <router-link to='/'>1920 * 1080</router-link>
              </li>
            </ul>
          </div>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <el-footer>
      <Footer></Footer>
    </el-footer>

  </div>
</template>

<script>
import Header from "../components/header.vue";
import Nav from "../components/nav.vue";
import Footer from "../components/foot.vue";
import Swipers from "../components/swiper.vue";

export default {
  data() {
    return {
      imgData: [
        {
          id:1 ,
          src: { url: require("@/assets/images/1440x900/1.jpeg") },
        },
        {
          id:2 ,
          src: { url: require("@/assets/images/1440x900/2.jpeg") },
        },
        {
          id:21 ,
          src: { url: require("@/assets/images/1920x1080/1.jpeg") },
        }
      ]
    };
  },
  components: {
    Header,
    Nav,
    Footer,
    Swipers,
  },
};
</script>

<style lang="scss" >
.el-header {
  height: 100% !important;
}

.el-header,
.el-footer {
  // background-color: #b3c0d1;
  padding: 0 !important;
  color: #333;
  text-align: center;
  line-height: 100px;
}

.el-aside {
  // background-color: #d3dce6;
  color: #333;
  text-align: center;
  // line-height: 200px;
  // border: 1px solid red;
  p {
    margin-top: 10px;
    background-color: #395178;
    color: #fff;
    height: 30px;
    line-height: 30px;
  }
  ul {
    li {
      padding: 20px 0;
      height: 50px;
      line-height: 50px;
      color: #fff;
      background-color: #91aad1;
      border-bottom: 1px dashed #395178;
      &:last-child{
        border-bottom: none;
      }
      a{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.el-main {
  // background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
